<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input v-model="query.name" clearable size="small" placeholder="输入产品名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="primaryToQuery(query.name)" />
        <span>
          <el-button v-model="query.name" class="filter-item" size="mini" type="success" icon="el-icon-search" @click="primaryToQuery(query.name)">搜索</el-button>
          <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="primaryResetQuery">重置</el-button>
        </span>
      </div>
      <div class="crud-opts">
        <span class="crud-opts-left">
          <!--左侧插槽-->
          <slot name="left" />
          <el-button
            v-permission="permission.add"
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="diaVisiable=true"
          >
            新增
          </el-button>
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-edit"
            :disabled="xgDis"
            @click="xgClick"
          >
            修改
          </el-button>
          <el-button
            slot="reference"
            class="filter-item"
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="scDis"
          >
            删除
          </el-button>
          <el-button
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-more"
            @click="allDis"
          >
          </el-button>
          <slot name="beforeExport" />
          <!--右侧-->
          <slot name="right" />
        </span>
      </div>
    </div>
    <!--表单组件-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="cannel"
      :visible.sync="diaVisiable"
      title="新增产品"
      :fullscreen="true"
    >
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="选择分组" icon="el-icon-edit" />
        <el-step title="设置条件" icon="el-icon-s-opportunity" />
      </el-steps>
      <!--选择分组和模型-->
      <div v-if="choosed=='one'" style="margin-top: 2%;">
        <el-form ref="form" :model="modelForm" :rules="rules" size="small" label-width="120px">
          <el-form-item label="选择分组" prop="groupingId">
            <treeselect v-model="modelForm.groupingId" :options="grouping" style="width: 370px;" placeholder="选择分组" />
          </el-form-item>
          <el-form-item label="选择模型" prop="modelsId">
            <treeselect v-model="modelForm.modelsId" :options="models" style="width: 370px;" placeholder="选择模型" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="choose('two')">下一步</el-button>
        </div>
      </div>
      <div v-if="choosed=='two'" style="margin-top: 2%;">
        <el-form ref="sourForm" size="small" :rules="rules" :model="newProduct">
          <el-form-item label="产品编号" prop="code">
            <el-input v-model="newProduct.code" type="text" placeholder="请输入产品编号" style="width: 20%;" />
          </el-form-item>
          <el-form-item label="产品名称" prop="name">
            <el-input v-model="newProduct.name" type="text" placeholder="请输入产品名称" style="width: 20%;" />
          </el-form-item>
          <el-form-item label="分组">
            <treeselect v-model="modelForm.groupingId" :options="grouping" style="width: 370px;" :disabled="true" />
          </el-form-item>
          <el-form-item label="模型">
            <treeselect v-model="modelForm.modelsId" :options="models" style="width: 370px;" :disabled="true" />
          </el-form-item>
        </el-form>
        <div>
          <span>封装条件</span>
        </div>
        <el-row style="margin: 2% 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);min-height: 90px">
          <el-col v-for="(list,key) in lists" :key="key" :span="24" style="margin: 1% 1%;">
            <el-row :gutter="20" class="margins">
              <el-col :span="2">
                {{ list.name }}
              </el-col>
              <el-col v-if="list.type=='int'" :span="6">
                <el-input v-model="list.value" placeholder="请输入参数" type="text" />
              </el-col>
              <el-col v-if="list.type=='String'" :span="6">
                <el-input v-model="list.value" type="text" placeholder="请输入参数" />
              </el-col>
              <el-col v-if="list.type=='bool'" :span="6">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
              <el-col v-if="list.type=='date'" :span="6">
                <el-time-picker
                  v-model="list.value"
                  placeholder="任意时间点"
                  style="display: inline-block; float: left;"
                />
              </el-col>
              <el-col v-if="list.id!==''" :span="6">
                <el-button type="danger" @click="del(list.id)">删除信息</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <div>
          <span>数据库字段</span><br><br>
          <el-select v-model="worldLists" clearable filterable multiple placeholder="请选择" @change="clickLinkSelect">
            <el-option
              v-for="item in dataArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-button @click="clickAll(dataArr)">全选</el-button>
        </div>
        <el-row
          :gutter="20"
          class="margins"
          style="margin: 1% 0;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
          min-height: 90px;"
        >
          <div v-for="(item) of dataArr" :key="item.id">
            <el-col :span="4" style="margin: 1% 0;">
              <el-link @click="clickLink(item.id,item.type,item.name)">{{ item.id }}({{ item.name }})</el-link>
            </el-col>
          </div>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="choose('one')">上一步</el-button>
          <el-button type="primary" @click="complete('three')">完成</el-button>
          <el-button type="primary" @click="savecondi">继续新建</el-button>
        </div>
        <el-row
          :gutter="20"
          class="margins"
          style="margin: 1% 0;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
          min-height: 90px;"
        >
          <div v-for="(item) of goupjia" :key="item.id">
            <el-col :span="4" style="margin: 1% 0;">
              <el-link @click="clickLink1(item.id)">({{ item.name }})</el-link>
            </el-col>
          </div>
        </el-row>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table ref="table" :data="this.tableData" :stripe="true" @selection-change="seleChange">
      <el-table-column type="selection" align="center" />
      <el-table-column label="产品编号" prop="code" align="center" />
      <el-table-column label="产品名称" prop="name" align="center" />
      <el-table-column label="分组名称" prop="groupName" align="center" />
      <el-table-column label="模型名称" prop="modelName" align="center" />
      <el-table-column label="表名" prop="tableName" align="center" />
      <el-table-column label="所属库" prop="type" align="center" />
      <el-table-column label="表备注" prop="remarks" align="center" />
      <el-table-column label="操作" fixed="right" width="100px">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClicks(scope.row)">详情列表</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--修改弹窗-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="cannel2"
      :visible.sync="xgtableStatus"
      :title="product"
      :fullscreen="true"
    >
      <div style="margin-top: 2%;">
        <div>
          <span>封装条件</span>
        </div>
        <el-row style="margin: 2% 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);min-height: 90px">
          <el-col v-for="(list,index) in lists" :key="index" :span="24" style="margin: 1% 1%;">
            <el-row :gutter="20" class="margins">
              <el-col :span="4">
                {{ list.name }}
              </el-col>
              <el-col v-if="list.type=='int'" :span="10">
                <el-input v-model="list.value" placeholder="请输入参数" type="text" />
              </el-col>
              <el-col v-if="list.type=='String'" :span="10">
                <el-input v-model="list.value" type="text" placeholder="请输入参数" />
              </el-col>
              <el-col v-if="list.type=='bool'" :span="10">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
              <el-col v-if="list.type=='date'" :span="10">
                <el-time-picker
                  v-model="list.value"
                  placeholder="任意时间点"
                  style="display: inline-block; float: left;"
                />
              </el-col>
              <el-col v-if="list.id!==''" :span="6">
                <el-button type="danger" @click="del(index)">删除信息</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <div>
          <span>数据库字段</span><br><br>
          <el-select v-model="worldLists" clearable filterable multiple placeholder="请选择" @change="clickLinkSelect">
            <el-option
              v-for="item in dataArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-button @click="clickAll(dataArr)">全选</el-button>
        </div>
        <el-row
          :gutter="20"
          class="margins"
          style="margin: 1% 0;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
          min-height: 90px;"
        >
          <div v-for="(item) of dataArr" :key="item.id">
            <el-col :span="4" style="margin: 1% 0;">
              <el-link @click="clickLink(item.id,item.type,item.name)">{{ item.id }}({{ item.name }})</el-link>
            </el-col>
          </div>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cannel2">取消</el-button>
          <el-button type="primary" @click="complete">完成</el-button>
        </div>
      </div>
    </el-dialog>
    <!--详情页面-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="cannel3"
      :visible.sync="tabDis"
      :fullscreen="true"
    >
      <el-tabs v-model="tablesValue" :tab-position="tabPosition">
        <el-tab-pane label="模型抓取">模型抓取
          <el-row style="margin: 2% 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);min-height: 90px">
            <el-form ref="form" :model="form" size="small" label-width="100px">
              <el-form-item text-align="center">
                <el-form-item label="数据源">
                  <el-input v-model="form.sourceValue" :disabled="true" style="width: 370px" />
                </el-form-item>
                <el-form-item label="源表名">
                  <el-input v-model="form.sourceTableValue" :disabled="true" style="width: 370px" />
                </el-form-item>
                <el-form-item label="本地表名">
                  <el-input v-model="form.localTableValue" :disabled="true" style="width: 370px" />
                </el-form-item>
                <el-form-item label="目标表名">
                  <el-input v-model="form.tableName" :disabled="true" style="width: 370px" />
                </el-form-item>
              </el-form-item>
              <el-form-item aglin="center">
                <el-table
                  :data="form.data"
                  border
                  style="width: 80%"
                  class="tb-edit"
                  highlight-current-row
                >
                  <el-table-column
                    prop="field"
                    label="字段名称"
                    width="200"
                  />
                  <el-table-column
                    prop="type"
                    label="类型"
                    width="150"
                  />
                  <el-table-column
                    label="中文名称"
                    :resizable="true"
                  />
                </el-table>
              </el-form-item>
            </el-form>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="模型详情">
          模型详情
          <el-row style="margin: 2% 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);min-height: 90px">
            <el-form ref="form" :model="form" size="small" label-width="100px">
              <el-form-item text-align="center">
                <el-form-item label="模型编码" prop="modelCode">
                  <el-input v-model="form.modelCode" :disabled="true" style="width: 370px;" />
                </el-form-item>
                <el-form-item label="模型名称">
                  <el-input v-model="form.modelName" :disabled="true" style="width: 370px;" />
                </el-form-item>
                <el-form-item label="目标表名">
                  <el-input v-model="form.tableName" :disabled="true" style="width: 370px;" />
                </el-form-item>
              </el-form-item>
              <el-form-item align="center">
                <el-table
                  :data="form.data"
                  border
                  style="width: 80%"
                  class="tb-edit"
                  highlight-current-row
                >
                  <el-table-column
                    prop="field"
                    label="字段名称"
                    width="200"
                  />
                  <el-table-column
                    prop="type"
                    label="类型"
                    width="150"
                  />
                  <el-table-column
                    prop="cname"
                    label="中文名称"
                  />
                </el-table>
              </el-form-item>
            </el-form>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="分组详情">
          分组详情
          <el-row style="margin: 2% 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);min-height: 90px">
            <span class="crud-opts-left">
              <!--左侧插槽-->
              <el-button
                v-permission="permission.add"
                class="filter-item"
                size="mini"
                type="primary"
                icon="el-icon-plus"
                @click="diaVisiable=true"
              >
                新增</el-button>
            </span>
            <el-row
              :gutter="20"
              class="margins"
            >
              <div v-for="(item) of grouping" :key="item.id">
                <el-col :span="7" style="margin: 1% 0;">
                  <el-tag @click="tagClick(item)">{{ item.name }}</el-tag>
                </el-col>
              </div>
            </el-row>
          </el-row>
        </el-tab-pane>
        <!--产品详情信息-->
        <el-tab-pane :label="groupItem.name">
          {{ groupItem.name }}列表
          <el-row style="margin: 2% 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);min-height: 90px">
            <div>
              <!-- 搜索 -->
              <el-cascader
                placeholder="请选择"
                :options="optionsTest"
                :props="{ multiple: true }"
                filterable
                clearable
              />
              <el-date-picker
                v-model="query.createTime"
                :default-time="['00:00:00','23:59:59']"
                type="daterange"
                range-separator=":"
                size="small"
                style="width:240px"
                class="date-item"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
              <el-select
                v-model="query.enabled"
                clearable
                size="small"
                placeholder="状态"
                class="filter-item"
                style="width: 90px"
                @change="crud.toQuery"
              >
                <el-option
                  v-for="item in enabledTypeOptions"
                  :key="item.key"
                  :label="item.display_name"
                  :value="item.key"
                />
              </el-select>
              <span>
                <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
                <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
              </span>
            </div>
            <div>
              <span class="crud-opts-left">
                <!--左侧插槽-->
                <el-button
                  v-permission="permission.add"
                  class="filter-item"
                  size="mini"
                  type="primary"
                  icon="el-icon-plus"
                  @click="diaVisiable=true"
                >
                  新增
                </el-button>
                <el-button
                  v-permission="permission.add"
                  class="filter-item"
                  size="mini"
                  type="primary"
                  icon="el-icon-help"
                  :disabled="runButtonVisible"
                  @click="diaVisiable=true"
                >
                  跑批
                </el-button>
                <el-button
                  v-permission="permission.add"
                  class="filter-item"
                  size="mini"
                  type="primary"
                  :disabled="approvalButtonVisible"
                  @click="diaVisiable=true"
                >
                  审批查看
                </el-button>
              </span>
            </div>
          </el-row>
          <el-row style="margin: 2% 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);min-height: 90px">
            <el-table
              :data="congoupLists"
              height="300"
              highlight-current-row
              @selection-change="selectChange"
            >
              <el-table-column
                type="selection"
                align="center"
                width="50"
              />
              <el-table-column prop="weight" label="权重" sort-by="weight" width="50" />
              <el-table-column prop="code" align="center" label="产品编号">
                <template slot-scope="scope">
                  <el-link @click="clickLink1(scope.row.code)">{{ scope.row.code }}</el-link>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="name" label="产品名称">
                <template slot-scope="scope">
                  <el-link @click="clickLink1(scope.row.code)">{{ scope.row.name }}</el-link>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="approvalStatus" label="审批状态">
                <template slot-scope="scope">
                  <span>{{ setApprovalStatus(scope.row.approvalStatus) }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="status" label="跑批状态">
                <template slot-scope="scope">
                  <span>{{ setStatus(scope.row.status) }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="runDetail" label="跑批详情">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleRunClicks(scope.row)">跑批详情</el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="280px">
                <template slot-scope="scope">
                  <el-button @click="upLayer(scope.$index, scope.row)">上移</el-button>
                  <el-button @click="downLayer(scope.$index, scope.row)">下移 </el-button>
                  <el-popover
                    :v-model="visiblePop"
                    placement="left"
                    width="50"
                    @show="popShow"
                    @hide="popHide(scope.$index, scope.row, popInp)"
                  >
                    <div style="text-align: right; margin: 0">
                      <el-input v-model="popInp" />
                    </div>
                    <div style="text-align: right; margin: 0">
                      <el-button size="mini" type="text" @click="visiblePop = false">取消</el-button>
                      <el-button size="mini" type="text" @click="visiblePop = false">确定</el-button>
                    </div>
                    <el-button slot="reference">跳转到</el-button>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <div>
              <span>封装条件</span>
            </div>
            <el-row style="margin: 2% 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);min-height: 90px">
              <el-col v-for="(list,index) in conditionjiaList" :key="index" :span="24" style="margin: 1% 1%;">
                <el-row :gutter="20" class="margins">
                  <el-col :span="4">
                    {{ list.name }}
                  </el-col>
                  <el-col v-if="list.type=='int'" :span="10">
                    <el-input v-model="list.value" type="text" :disabled="true" />
                  </el-col>
                  <el-col v-if="list.type=='String'" :span="10">
                    <el-input v-model="list.value" type="text" :disabled="true" />
                  </el-col>
                  <el-col v-if="list.type=='bool'" :span="10">
                    <el-select v-model="value" :disabled="true">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                  <el-col v-if="list.type=='date'" :span="10" :disabled="true">
                    <el-time-picker
                      v-model="list.value"
                      placeholder="任意时间点"
                      style="display: inline-block; float: left;"
                    />
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-row>
        </el-tab-pane>
        <!--<el-tab-pane label="日志监控">日志监控</el-tab-pane>-->
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import crudDept from '@/api/management/dataconfig'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '部门', url: '', crudMethod: { ...crudDept }})
const defaultForm = { id: null, name: null, pid: 1, enabled: 'true' }
export default {
  name: 'Dept',
  components: { Treeselect },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  // 设置数据字典
  dicts: ['dataconfig_status'],
  data() {
    return {
      // 步骤
      active: 0,
      choosed: 'one',
      rules: {
        groupingId: [{ required: true, message: '请选择分组', trigger: 'blur' }],
        modelsId: [{ required: true, message: '请选择模型', trigger: 'blur' }],
        code: [{ required: true, message: '请输入产品编号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }]
      },
      // 首页表数据(整体)
      tableData: [{ code: 'p001', name: '绩效/模型1', groupName: '绩效', groupCode: 'kpi', modelName: '模型1', modelCode: 'model1', tableName: 'pdcs_xindai', type: 'PDCS', remarks: '信贷明细表' },
        { code: 'p002', name: '绩效/模型2', groupName: '绩效', groupCode: 'kpi', modelName: '模型2', modelCode: 'model2', tableName: 'pdcs_licai', type: 'PDCS', remarks: '理财明细表' },
        { code: 'p003', name: '考核/模型1', groupName: '考核', groupCode: 'examine', modelName: '模型1', modelCode: 'model1', tableName: 'pdcs_xindai', type: 'PDCS', remarks: '基金明细表' },
        { code: 'p004', name: '考核/模型2', groupName: '考核', groupCode: 'examine', modelName: '模型2', modelCode: 'model2', tableName: 'pdcs_licai', type: 'PDCS', remarks: '保险明细表' },
        { code: 'p005', name: '收款额/模型3', groupName: '收款额', groupCode: 'charge', modelName: '模型3', modelCode: 'model3', tableName: 'pdcs_baoxian', type: 'PDCS', remarks: '保险明细表' }],
      // 封装查询的数据
      queryTableData: [],
      // 临时数据(用于页面展示,后期开发删除)
      temporaryTableData: [{ code: 'p001', name: '绩效/模型1', groupName: '绩效', groupCode: 'kpi', modelName: '模型1', modelCode: 'model1', tableName: 'pdcs_xindai', type: 'PDCS', remarks: '信贷明细表' },
        { code: 'p002', name: '绩效/模型2', groupName: '绩效', groupCode: 'kpi', modelName: '模型2', modelCode: 'model2', tableName: 'pdcs_licai', type: 'PDCS', remarks: '理财明细表' },
        { code: 'p003', name: '考核/模型1', groupName: '考核', groupCode: 'examine', modelName: '模型1', modelCode: 'model1', tableName: 'pdcs_xindai', type: 'PDCS', remarks: '基金明细表' },
        { code: 'p004', name: '考核/模型2', groupName: '考核', groupCode: 'examine', modelName: '模型2', modelCode: 'model2', tableName: 'pdcs_licai', type: 'PDCS', remarks: '保险明细表' },
        { code: 'p005', name: '收款额/模型3', groupName: '收款额', groupCode: 'charge', modelName: '模型3', modelCode: 'model3', tableName: 'pdcs_baoxian', type: 'PDCS', remarks: '保险明细表' }],
      // 数据库字段数据(用于页面展示,后期开发删除)
      dataArr: [{ id: 'id', name: '主键', type: 'int', value: '' }, { id: 'name', name: '名称', type: 'String', value: '' },
        { id: 'age', name: '年龄', type: 'int', value: '' }, { id: 'addr', name: '地址', type: 'String', value: '' },
        { id: 'tel', name: '手机', type: 'String', value: '' }, { id: 'email', name: '邮箱', type: 'String', value: '' },
        { id: 'time', name: '日期', type: 'date', value: '' }, { id: 'sex', name: '性别', type: 'bool', value: '' }],
      options: [{ label: '男', value: '0' }, { label: '女', value: '1' }],
      lists: [],
      worldLists: [],
      // 新增产品字段信息
      newProduct: { name: '', code: '' },
      modelForm: { groupingId: 1, modelsId: 1 },
      // 分组信息
      grouping: [{ id: 1, name: '绩效', label: '绩效', groupCode: 'kpi' }, { id: 2, name: '考核', label: '考核', groupCode: 'examine' }, { id: 3, name: '收款额', label: '收款额', groupCode: 'charge' }],
      // 模型信息
      models: [{ id: 1, name: '模型1', label: '模型1', modelCode: 'model1' }, { id: 2, name: '模型2', label: '模型2', modelCode: 'model2' }, { id: 3, name: '模型3', label: '模型3', modelCode: 'model3' }],
      depts: [],
      permission: {
        add: ['admin', 'dept:add'],
        edit: ['admin', 'dept:edit'],
        del: ['admin', 'dept:del']
      },
      enabledTypeOptions: [
        { key: '0', display_name: '成功' },
        { key: '1', display_name: '执行中' },
        { key: '2', display_name: '失败' },
        { key: '3', display_name: '未跑批' }
      ],
      tableStatus: false,
      diaVisiable: false,
      xgDis: true,
      scDis: true,
      xgtableStatus: false,
      product: '',
      value: '',
      radio: '',
      congoup: [{ weight: 1, code: 'p001', name: '绩效/信贷', status: 0, approvalStatus: 0 }, { weight: 2, code: 'p002', name: '绩效/基金', status: 1, approvalStatus: 0 }, { weight: 3, code: 'p003', name: '绩效/理财', status: 2, approvalStatus: 0 },
        { weight: 4, code: 'p004', name: '绩效/理财', status: 3, approvalStatus: 1 }, { weight: 5, code: 'p005', name: '绩效/理财', status: 3, approvalStatus: 2 }],
      congoupLists: [],
      // 假数据
      goupjia: [{ id: 'p001', name: '绩效/信贷' }, { id: 'p002', name: '绩效/基金' }, { id: 'p003', name: '考核/理财' }],
      conditionjia: [{ id: 'name', name: '信贷名称', value: '信贷1', type: 'String', goupId: 'p001' }, { id: 'quota', name: '信贷额度', value: '10000', type: 'int', goupId: 'p001' },
        { id: 'time', name: '信贷期限', value: '2年', type: 'String', goupId: 'p001' }, { id: 'name', name: '基金名称', value: '基金1', type: 'String', goupId: 'p002' },
        { id: 'type', name: '基金类型', value: '日日鑫', type: 'String', goupId: 'p002' }, { id: 'bi', name: '基金年利率', value: '0.5%', type: 'String', goupId: 'p002' },
        { id: 'name', name: '理财名称', value: '理财1', type: 'String', goupId: 'p003' }, { id: 'type', name: '理财类型', value: '太保理财', type: 'String', goupId: 'p003' },
        { id: 'time', name: '理财期数', value: '3', type: 'int', goupId: 'p003' }, { id: 'fx', name: '基金风险', value: '低', type: 'String', goupId: 'p003' },
        { id: 'ed', name: '最低理财额度', value: '10000', type: 'int', goupId: 'p003' },
        { id: 'name', name: '理财名称', value: '理财1', type: 'String', goupId: 'p004' }, { id: 'type', name: '理财类型', value: '太保理财', type: 'String', goupId: 'p004' },
        { id: 'time', name: '理财期数', value: '3', type: 'int', goupId: 'p004' }, { id: 'fx', name: '基金风险', value: '低', type: 'String', goupId: 'p004' },
        { id: 'ed', name: '最低理财额度', value: '10000', type: 'int', goupId: 'p004' },
        { id: 'name', name: '理财名称', value: '理财1', type: 'String', goupId: 'p005' }, { id: 'type', name: '理财类型', value: '太保理财', type: 'String', goupId: 'p005' },
        { id: 'time', name: '理财期数', value: '3', type: 'int', goupId: 'p005' }, { id: 'fx', name: '基金风险', value: '低', type: 'String', goupId: 'p005' },
        { id: 'ed', name: '最低理财额度', value: '10000', type: 'int', goupId: 'p005' }],
      conditionjiaList: [],
      newCondis: [],
      bm: [],
      tabPosition: 'left',
      tabDis: false,
      tablesValue: '3',
      visiblePop: false,
      popInp: '',
      groupdet: false,
      groupItem: { id: 1, name: '绩效', label: '绩效', groupCode: 'kpi' },
      form: {
        tableName: 'app_pdcs',
        sourceValue: '61oracle',
        sourceTableValue: 'pdcs1',
        localTableValue: 'localPdcs',
        modelCode: 'MODEL1',
        modelName: '模型1',
        data: [{
          field: 'PK_ID',
          type: 'VARCHAR',
          cname: '主键'
        }, {
          field: 'APP_CODE',
          type: 'VARCHAR',
          cname: ''
        }, {
          field: 'APP_NAME',
          type: 'VARCHAR',
          cname: ''
        }, {
          field: 'PARENT_ID',
          type: 'VARCHAR',
          cname: ''
        }, {
          field: 'APP_SEQ',
          type: 'VARCHAR',
          cname: ''
        }, {
          field: 'APP_LEVEL',
          type: 'VARCHAR',
          cname: ''
        }, {
          field: 'IMPALA_USER',
          type: 'VARCHAR',
          cname: ''
        }, {
          field: 'IMPALA_PASSWORD',
          type: 'VARCHAR',
          cname: ''
        }]
      },
      optionsTest: [{
        value: 'jixiao',
        label: '绩效',
        children: [{
          value: 'moxing1',
          label: '模型1',
          children: [{
            value: 'p001',
            label: '产品1'
          }, {
            value: 'p002',
            label: '产品2'
          }, {
            value: 'p003',
            label: '产品3'
          }, {
            value: 'p004',
            label: '产品4'
          }]
        }, {
          value: 'moxing2',
          label: '模型2',
          children: [{
            value: 'p005',
            label: '产品5'
          }, {
            value: 'p006',
            label: '产品6'
          }]
        }]
      }],
      runButtonVisible: true,
      approvalButtonVisible: true
    }
  },
  methods: {
    // 提交前的验证
    /* [CRUD.HOOK.afterValidateCU]() {
      if (!this.form.pid && this.form.id !== 1) {
        this.$message({
          message: '上级部门不能为空',
          type: 'warning'
        })
        return false
      }
      return true
    },*/
    // 主页的查询
    primaryToQuery(name) {
      if (!name) {
        return
      }
      this.queryTableData = []
      console.log(this.tableData.find(x => x.name === name))
      this.queryTableData.push(this.tableData.find(function(obj) {
        return obj.name === name
      }))
      this.tableData = this.queryTableData
    },
    // 主页重置
    primaryResetQuery() {
      this.tableData = this.temporaryTableData
    },
    cannel() {
      this.crud.cancelCU()
      this.choosed = 'one'
      this.active = 0
      this.lists = []
      this.diaVisiable = false
    },
    // 选择下一步/上一步
    choose(e) {
      if (e === 'one') {
        this.choosed = 'one'
      } else if (e === 'two') {
        this.choosed = 'two'
        if (this.active++ > 1 && this.active++ < 2) this.active = 0
      } else if (e === 'three') {
        this.choosed = 'three'
        console.log('选择的条件', this.lists)
        if (this.active++ > 1 && this.active++ < 2) this.active = 0
      }
    },
    // 单点字段选择
    clickLink(id, type, name) {
      for (let i = 0; i < this.worldLists.length; i++) {
        if (this.worldLists[i] === id) {
          this.$notify({
            title: '失败',
            message: '该字段已经选择，请重新选择字段!',
            type: 'error'
          })
          return
        }
      }
      this.worldLists.push(id)
      const rawdata = { id: id, name: name, type: type, value: '' }
      /* const tabledata = { id: id, name: '', type: type }*/
      this.lists.push(rawdata)
      console.log(this.lists)
    },
    // 字段全选
    clickAll(data) {
      if (data) {
        this.lists = []
        this.worldLists = []
        data.forEach(item => {
          this.worldLists.push(item.id)
          this.lists.push(item)
        })
      }
    },
    // 下拉框选择
    clickLinkSelect(data) {
      this.lists = []
      data.forEach(item => {
        this.lists.push(this.dataArr.find(function(obj) {
          return obj.id === item
        }))
      })
    },
    del(id) {
      // id属性获取数组中对象
      const indexObject = this.lists.find(x => x.id === id)
      this.lists.splice(this.lists.indexOf(indexObject), 1)
      this.worldLists.splice(this.worldLists.indexOf(id), 1)
    },
    // 完成
    complete() {
      // 链接后台接口 todo
      this.choosed = 'one'
      this.active = 0
      this.lists = []
      this.diaVisiable = false
      this.xgtableStatus = false
      this.tabDis = true
      this.congoupLists = this.congoup
    },
    handleClick(e) {
      console.log('e====', e)
      this.tableStatus = true
      // 查询分组下的所有已经设置过的数据 todo
    },
    clickLink1(code, name) {
      console.log(code)

      this.conditionjiaList = []
      this.conditionjia.forEach(item => {
        console.log('item', item)
        if (item.goupId === code) {
          this.conditionjiaList.push(item)
        }
      })
      this.lists = this.conditionjiaList
    },
    clickLinkNew(id, mid, name) {
      this.conditionjiaList = []
      this.newCondis.forEach(item => {
        console.log('item', item)
        if (item.groupId + '' === id + '' && item.moid + '' === mid + '') {
          this.conditionjiaList.push(item)
        }
        console.log(this.conditionjiaList)
      })
    },
    cannel1() {
      this.conditionjiaList = []
      this.tableStatus = false
    },
    seleChange(selection) {
      if (selection.length > 0 && selection.length !== 1) {
        this.xgDis = true
        this.scDis = false
      } else if (selection.length === 1) {
        this.xgDis = false
        this.scDis = false
        this.product = '修改' + selection[0].name + '产品信息'
      } else {
        this.xgDis = true
        this.scDis = true
      }
    },
    xgClick() {
      this.xgtableStatus = true
    },
    allDis() {
      this.tabDis = true
      this.congoupLists = this.congoup
    },
    cannel2() {
      this.diaVisiable = false
      this.xgtableStatus = false
      this.choosed = 'one'
      this.active = 0
      this.lists = []
      this.value = ''
      this.congoup = []
      this.newCondis = []
      this.bm = []
      this.conditionjiaList = []
    },
    cannel3() {
      this.tabDis = false
      this.tablesValue = '3'
    },
    cannel4() {
      this.groupdet = false
    },
    savecondi() {
      if (this.newProduct.code === '') {
        this.$notify({
          title: '失败',
          message: '产品编号不能为空',
          type: 'error'
        })
        return
      } else if (this.newProduct.name === '') {
        this.$notify({
          title: '失败',
          message: '产品名称不能为空',
          type: 'error'
        })
        return
      } else {
        const cc = { id: '', name: '', mid: '' }
        cc.id = this.modelForm.id1
        cc.mid = this.modelForm.id2
        cc.name = this.newProduct.name
        const boll = {}
        this.bm.some(f => {
          if (f.fzid === cc.id && f.mxid === cc.mid) {
            this.$notify({
              title: '失败',
              message: '该分组模型已经创建过，请重新选择模型!',
              type: 'error'
            })
            boll.sta = 1
            return true
          }
        })
        // eslint-disable-next-line eqeqeq
        if (boll.sta != 1) {
          const fzobj = { fzid: '', mxid: '' }
          fzobj.fzid = this.modelForm.id1
          fzobj.mxid = this.modelForm.id2
          this.bm.push(fzobj)
          this.lists.forEach(it => {
            const con = { id: '', name: '', value: '', type: '', groupId: '', moid: '' }
            con.groupId = this.modelForm.id1 + ''
            con.name = it.name
            con.id = it.id
            con.value = it.value
            con.type = it.type
            con.moid = this.modelForm.id2 + ''
            this.newCondis.push(con)
          })
          this.congoup.push(cc)
          console.log(this.newCondis)
        }
      }
      this.newProduct = { name: '', code: '' }
    },
    // 上移
    upLayer(index, row) {
      var that = this
      if (index === 0) {
        that.$message({
          message: '处于顶端，不能继续上移',
          type: 'warning'
        })
      } else {
        const upDate = that.congoup[index - 1]
        that.congoup.splice(index - 1, 1)
        that.congoup.splice(index, 0, upDate)
        that.congoup[index - 1].weight = index
        that.congoup[index].weight = index + 1
      }
    },
    // 下移
    downLayer(index, row) {
      var that = this
      if (index + 1 === that.congoup.length) {
        that.$message({
          message: '处于末端端，不能继续下移',
          type: 'warning'
        })
      } else {
        const downDate = that.congoup[index + 1]
        that.congoup.splice(index + 1, 1)
        that.congoup.splice(index, 0, downDate)
        that.congoup[index].weight = index + 1
        that.congoup[index + 1].weight = index + 2
      }
    },
    tagClick(item) {
      this.groupItem = item
      this.tablesValue = '3'
      console.log(item)
    },
    popShow() {
      this.popInp = ''
    },
    popHide(index, row, targetIndex) {
      var that = this
      if (!targetIndex) {
        // 不做任何操作
        return
      } else {
        targetIndex = parseInt(targetIndex)
      }
      if (targetIndex <= 0 || targetIndex === (index + 1)) {
        return
      } else if (targetIndex < (index + 1)) {
        const upDate = that.congoup[index]
        that.congoup.splice(index, 1)
        that.congoup.splice(targetIndex - 1, 0, upDate)
        for (let i = 0; i <= (index + 1 - targetIndex); i++) {
          that.congoup[targetIndex - 1 + i].weight = targetIndex + i
        }
      } else if (targetIndex > (index + 1)) {
        const downDate = that.congoup[index]
        that.congoup.splice(index, 1)
        that.congoup.splice(targetIndex - 1, 0, downDate)
        for (let i = 0; i <= (targetIndex - index - 1); i++) {
          that.congoup[targetIndex - 1 - i].weight = targetIndex - i
        }
      }
    },
    // 查看详情
    handleClicks(row) {
      // 链接后台接口 todo
      this.choosed = 'one'
      this.active = 0
      this.lists = []
      this.diaVisiable = false
      this.tabDis = true
      this.congoupLists = []
      this.groupItem = {}
      this.congoupLists.push(this.congoup.find(x => x.code === row.code))
      this.groupItem = this.grouping.find(x => x.groupCode === row.groupCode)
      console.log(this.groupItem)
    },
    // 设置跑批状态转换
    setStatus(status) {
      if (status === 0) {
        return '成功'
      } else if (status === 1) {
        return '执行中'
      } else if (status === 2) {
        return '失败'
      } else {
        return '未跑批'
      }
    },
    // 设置审批状态转换
    setApprovalStatus(status) {
      if (status === 0) {
        return '通过'
      } else if (status === 1) {
        return '审批中'
      } else if (status === 2) {
        return '拒绝'
      } else {
        return '未发起'
      }
    },
    // 跑批详情
    handleRunClicks(row) {
      console.log(row)
    },
    // 控制审批查看和跑批按钮
    selectChange(selection) {
      console.log(selection)
      if (selection.length > 0) {
        this.runButtonVisible = false
        this.approvalButtonVisible = false
      } else {
        this.runButtonVisible = true
        this.approvalButtonVisible = true
      }
    }
  }
}
</script>
<style>
  .crud-opts {
    padding: 6px 0;
    display: -webkit-flex;
    display: flex;
    align-items: center;
  }
  .crud-opts .crud-opts-right {
    margin-left: auto;
  }
</style>
